<html>
<head>
    <link rel="stylesheet" href="{{service}}resources/vditor/dist/index.css?{{serverToken}}"/>
    <link rel="stylesheet" href="{{service}}resources/vditor/style.css?{{serverToken}}"/>
    <script src="{{service}}resources/vditor/dist/index.min.js?{{serverToken}}"></script>
    <script src="{{service}}resources/vditor/jquery-3.6.0.min.js?{{serverToken}}"></script>
</head>
<body class="body">
<div id="vditor" class="vditor vditor--fullscreen"></div>
<div id="editorInfo" style="display:none;">
    <div style="max-width: 520px; font-size: 14px;line-height: 22px;margin-bottom: 14px;">
        <p style="text-align: center;margin: 14px 0">
            <em>Markdown Editor</em>
        </p>
        <div style="display: flex;margin-bottom: 14px;flex-wrap: wrap;align-items: center">
            <div style="flex: 1;min-width: 250px">
                IntelliJ Platform A full-featured WYSIWYG editor for markdown<br>
                Acknowledgement <a href="https://github.com/Vanessa219/vditor" target="_blank">vditor</a>
            </div>
        </div>
        <div style="display: flex;flex-wrap: wrap;">
            <ul style="list-style: none;flex: 1;min-width:148px">
                <li>
                    Source Code: <a href="https://github.com/shuzijun/markdown-editor" target="_blank">shuzijun/markdown-editor</a>
                </li>
                <li>
                    Donate: <a href="http://shuzijun.cn/donate.html" target="_blank">donate</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="donate" style="display:none;">
    <svg t="1589994565028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
         p-id="2808" width="32" height="32">
        <path d="M506.6 423.6m-29.8 0a29.8 29.8 0 1 0 59.6 0 29.8 29.8 0 1 0-59.6 0Z" fill="#0F0F0F" p-id="2809"></path>
        <path d="M717.8 114.5c-83.5 0-158.4 65.4-211.2 122-52.7-56.6-127.7-122-211.2-122-159.5 0-273.9 129.3-273.9 288.9C21.5 562.9 429.3 913 506.6 913s485.1-350.1 485.1-509.7c0.1-159.5-114.4-288.8-273.9-288.8z"
              fill="#FAFCFB" p-id="2810"></path>
        <path d="M506.6 926c-22 0-61-20.1-116-59.6-51.5-37-109.9-86.4-164.6-139-65.4-63-217.5-220.6-217.5-324 0-81.4 28.6-157.1 80.6-213.1 53.2-57.2 126.4-88.8 206.3-88.8 40 0 81.8 14.1 124.2 41.9 28.1 18.4 56.6 42.8 86.9 74.2 30.3-31.5 58.9-55.8 86.9-74.2 42.5-27.8 84.3-41.9 124.2-41.9 79.9 0 153.2 31.5 206.3 88.8 52 56 80.6 131.7 80.6 213.1 0 103.4-152.1 261-217.5 324-54.6 52.6-113.1 102-164.6 139-54.8 39.5-93.8 59.6-115.8 59.6zM295.4 127.5c-72.6 0-139.1 28.6-187.3 80.4-47.5 51.2-73.7 120.6-73.7 195.4 0 64.8 78.3 178.9 209.6 305.3 53.8 51.8 111.2 100.3 161.7 136.6 56.1 40.4 88.9 54.8 100.9 54.8s44.7-14.4 100.9-54.8c50.5-36.3 108-84.9 161.7-136.6 131.2-126.4 209.6-240.5 209.6-305.3 0-74.9-26.2-144.2-73.7-195.4-48.2-51.9-114.7-80.4-187.3-80.4-61.8 0-127.8 38.5-201.7 117.9-2.5 2.6-5.9 4.1-9.5 4.1s-7.1-1.5-9.5-4.1C423.2 166 357.2 127.5 295.4 127.5z"
              fill="#141414" p-id="2811"></path>
        <path d="M353.9 415.6m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#0F0F0F" p-id="2812"></path>
        <path d="M659.3 415.6m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#0F0F0F" p-id="2813"></path>
        <path d="M411.6 538.5c0 52.3 42.8 95 95 95 52.3 0 95-42.8 95-95v-31.7h-190v31.7z" fill="#5B5143"
              p-id="2814"></path>
        <path d="M506.6 646.5c-59.6 0-108-48.5-108-108v-31.7c0-7.2 5.8-13 13-13h190.1c7.2 0 13 5.8 13 13v31.7c0 59.5-48.5 108-108.1 108z m-82-126.7v18.7c0 45.2 36.8 82 82 82s82-36.8 82-82v-18.7h-164z"
              fill="#141414" p-id="2815"></path>
        <path d="M450.4 578.9a54.7 27.5 0 1 0 109.4 0 54.7 27.5 0 1 0-109.4 0Z" fill="#EA64F9" p-id="2816"></path>
        <path d="M256 502.7a32.1 27.5 0 1 0 64.2 0 32.1 27.5 0 1 0-64.2 0Z" fill="#EFAFF9" p-id="2817"></path>
        <path d="M703.3 502.7a32.1 27.5 0 1 0 64.2 0 32.1 27.5 0 1 0-64.2 0Z" fill="#EFAFF9" p-id="2818"></path>
    </svg>
</div>
</body>
<script>
    $.ajaxSettings.async = false;
    const userTemplate = "{{userTemplate}}" == "true";
    const fileUrl = "{{service}}markdownFile?file={{filePath}}&projectUrl={{projectUrl}}&projectName={{projectName}}&{{serverToken}}";
    const uploadUrl = "{{service}}uploadFile?file={{filePath}}&projectUrl={{projectUrl}}&projectName={{projectName}}&{{serverToken}}";
    const exportUrl = "{{service}}exportFile?file={{filePath}}&projectUrl={{projectUrl}}&projectName={{projectName}}&{{serverToken}}";
    const vditorCDN = "{{service}}resources/vditor";
    const vditorThemeCDN = userTemplate ? "{{service}}assets/vditor/content-theme" : "{{service}}resources/vditor/dist/css/content-theme";
    let initError = true;
    let fileValue = "";
    let saveTime = Date.now();
    const darcula = "{{darcula}}" == "true";

    window.onload = function () {
        if (userTemplate) {
            $('<link>').appendTo('head').attr({
                type: 'text/css',
                rel: 'stylesheet',
                href: '{{service}}assets/vditor/userStyle.css'
            });
        }
        appendSyncedTip(!initError);
        vditor.vditor.toolbar.elements.export.querySelectorAll(".vditor-hint")[0].innerHTML="<button onclick='exportFile(\"pdf\")'>PDF</button>\n<button onclick='exportFile(\"html\")'>HTML</button>"
    }

    function editBlur(md) {
        if (initError) {
            vditor.tip("Get init file request error,Don't save.", 1000);
            return;
        }
        $.post(fileUrl, {"value": md}, function (data) {
            if (data.success == false) {
                vditor.tip("Failed to save file:" + data.message, 0);
            } else {
                this.fileValue = md;
                syncedTip(true, data)
                saveTime = Date.now() + 5000;
            }
        }).fail(function () {
            vditor.tip("Save file request error", 0);
        })
    }

    function editFocus(md) {
        if (Date.now() <= saveTime) {
            return;
        }
        $.get(fileUrl, function (data) {
            if (md != data) {
                this.fileValue = data;
                vditor.setValue(data);
                syncedTip(true, data)
            }
        }).fail(function () {
            vditor.tip("Get file request error", 0);
        })
    }

    function editInput(md) {
        syncedTip(false, md)
    }

    function initValue() {
        let value = "";
        $.get(fileUrl, function (data) {
            value = data;
            this.fileValue = value;
            initError = false;
        }).fail(function () {
            vditor.tip("Get file request error", 0);
            value = "Get file request error,Please reload";
            initError = true;
        })
        return value;
    }

    function appendSyncedTip(isSynced) {
        let synced = document.createElement("span");
        synced.className = "vditor-counter vditor-tooltipped vditor-tooltipped__nw";
        synced.id = "syncedTip";
        synced.title = "Automatic synchronization after losing focus";
        synced.innerHTML = isSynced ? "Synced" : "Not Synced";
        vditor.vditor.toolbar.element.appendChild(synced);
    }

    function syncedTip(isSynced, md) {
        if (!initError && (isSynced || md == this.fileValue)) {
            document.getElementById("syncedTip").innerHTML = "Synced";
        } else {
            document.getElementById("syncedTip").innerHTML = "Not Synced";
        }

    }

    function exportFile(type) {
        let options = {
            mode: "light",
            anchor: 2,
            lang: vditor.vditor.options.lang,
            hljs: vditor.vditor.options.preview.hljs,
            speech: {enable: false},
            math: vditor.vditor.options.preview.math,
            cdn: vditor.vditor.options.cdn,
            markdown: vditor.vditor.options.preview.markdown,
            theme: vditor.vditor.options.preview.theme,
            icon: vditor.vditor.options.icon
        }
        options.theme.current = "idea-light";
        Vditor.md2html(vditor.getValue(), options).then((content) => {
            let html = "<html>"
                + "<head>"
                + "<meta charset=\"utf-8\" />"
                + "<link rel=\"stylesheet\" type=\"text/css\" href=\"" + options.cdn + "/dist/index.css\"/>"
                + "<script src=\"" + options.cdn + "/dist/js/i18n/" + options.lang + ".js\"><\/script>"
                + "<script src=\"" + options.cdn + "/dist/method.min.js\"><\/script>"
                + "</head>"
                + "<body style=\"width: 1075px;\">"
                + "<div class=\"vditor-reset\" id=\"preview\">" + content + "</div>"
                + "<script>"
                + "    const previewElement = document.getElementById('preview');"
                + "    Vditor.setContentTheme('" + options.theme.current + "', '" + options.theme.path + "');"
                + "    Vditor.codeRender(previewElement);"
                + "    Vditor.highlightRender(" + JSON.stringify(options.hljs) + ", previewElement, '" + options.cdn + "');"
                + "    Vditor.mathRender(previewElement, { cdn: '" + options.cdn + "',math: " + JSON.stringify(options.math) + "});"
                + "    Vditor.mermaidRender(previewElement, '" + options.cdn + "', '" + options.mode + "');"
                + "    Vditor.flowchartRender(previewElement, '" + options.cdn + "');"
                + "    Vditor.graphvizRender(previewElement, '" + options.cdn + "');"
                + "    Vditor.chartRender(previewElement, '" + options.cdn + "', '" + options.mode + "');"
                + "    Vditor.mindmapRender(previewElement, '" + options.cdn + "', '" + options.mode + "');"
                + "    Vditor.abcRender(previewElement, '" + options.cdn + "');"
                + "    Vditor.mediaRender(previewElement);"
                + "    Vditor.speechRender(previewElement);"
                + " <\/script> "
                + " <script src=\"" + options.cdn + "/dist/js/icons/" + options.icon + ".js\"><\/script>"
                + "</body></html>";

            $.post(exportUrl, {
                "value": html,
                "type": type,
                "cdn": options.cdn,
                "themeCdn": options.theme.path
            }, function (data) {
                if (data.success == false) {
                    vditor.tip("Failed to Export file", 0);
                } else {
                    vditor.tip(data.data, 2000);
                }
            }).fail(function () {
                vditor.tip("Save file request error", 0);
            })
        });
    }

    const vditor = new Vditor('vditor', {
        "theme": darcula ? "dark" : "light",
        "lang": "{{Lang}}",
        "cache": {
            "enable": false
        },
        "toolbar": [
            {"name": "emoji", "tipPosition": "s"},
            {"name": "headings", "tipPosition": "s"},
            {"name": "bold", "tipPosition": "s"},
            {"name": "italic", "tipPosition": "s"},
            {"name": "strike", "tipPosition": "s"},
            {"name": "link", "tipPosition": "s"},
            "|",
            {"name": "list", "tipPosition": "s"},
            {"name": "ordered-list", "tipPosition": "s"},
            {"name": "check", "tipPosition": "s"},
            {"name": "outdent", "tipPosition": "s"},
            {"name": "indent", "tipPosition": "s"},
            "|",
            {"name": "quote", "tipPosition": "s"},
            {"name": "line", "tipPosition": "s"},
            {"name": "code", "tipPosition": "s"},
            {"name": "inline-code", "tipPosition": "s"},
            {"name": "insert-before", "tipPosition": "s"},
            {"name": "insert-after", "tipPosition": "s"},
            {"name": "table", "tipPosition": "s"},
            {"name": "upload", "tipPosition": "s"},
            "|",
            {"name": "undo", "tipPosition": "s"},
            {"name": "redo", "tipPosition": "s"},
            "|",
            {"name": "edit-mode", "tipPosition": "w"},
            {
                "name": "donate",
                "tip": "donate",
                "tipPosition": "s",
                "icon": document.getElementById("donate").innerHTML,
                click(event, vditor) {
                    window.open("http://shuzijun.cn/donate.html");
                }
            },
            {
                name: "more",
                toolbar: [
                    "both",
                    "code-theme",
                    "content-theme",
                    "outline",
                    "preview",
                    "devtools",
                    "export",
                    {
                        "name": "myInfo",
                        "icon": "info",
                        click(event, vditor) {
                            vditor.tip.show(document.getElementById("editorInfo").innerHTML, 0);
                        }
                    }
                ],
            },
        ],
        "toolbarConfig": {"pin": true},
        "cdn": vditorCDN,
        "preview": {
            "theme": {
                "current": darcula ? "idea-dark" : "idea-light",
                "path": vditorThemeCDN
            },
            "maxWidth": $(window).width() - 100,
            "actions": ["desktop", "tablet", "mobile"],
            "hljs": {"style": darcula ? "dracula" : "github"},
            "math": {
                "inlineDigit": true
            }
        },
        "counter": {
            "enable": true
        },
        "upload": {
            "url": uploadUrl
        },
        "value": initValue(),
        blur(md) {
            editBlur(md)
        },
        focus(md) {
            editFocus(md)
        },
        input(md) {
            editInput(md)
        }
    });

</script>
</html>